<template>
  <div class="left-qyzcz">
    <div class="tab-title" :class="isHall?'tab-title1':''">
      <span class="dec">枇杷文旅服务营业额占比</span>
    </div>
    <div class="tab-content" @click="showMask">
      <div ref="myChart" :class="isHall?'tab-myChart1':'tab-myChart'"></div>
    </div>
    <div class="mask-detail"  v-if="show">
         <turnoverMask @closeMask="closeMask" :yearList="yearList" :defaultYear="defaultYear" />
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import SelectYear from '../SelectYear.vue'
import turnoverMask from './turnoverMask.vue'
import { queryStatisticsdp } from '@/api/dashboards'
export default {
    components:{SelectYear,turnoverMask},
     props:{
        isHall:{
            type:Number
        }
    },
  data(){
    return{
        defaultYear:undefined,
        yearList:[],
        xaxis:[],
        visitData:[],
        turnoveList:[],
        show:false,
    }
  },
   watch: {
    isHall:{
        immediate: true,
        handler: function(val) {
            if(val){
            }
        }
    },
    },
  created(){
      this.getDate()
  },

  mounted() {
      this.queryStatisticsdp()
  },
  methods: {
    async queryStatisticsdp() {
      let res = await queryStatisticsdp()
      if(res.result){
          let list = res.result.series.length&&res.result.series
           if(list.length>5){
            list = list.slice(-5)
            }else{
            list = list
            }
           list.map(item=>{
            if(item.name==="营业额（万元）"){
               this.turnoveList = item.data
            }
            if(item.name==="游客量（万人次）"){
               this.visitData = item.data
            }
        })
        let xaxis = res.result.xaxis&&res.result.xaxis.length&&res.result.xaxis[0].data.map(Number)
        if(xaxis.length>5){
            this.xaxis = xaxis.slice(-5)
        }else{
            this.xaxis = xaxis
        }
        this.xaxis.map(item=>{
            const obj = {}
            obj.label = item
            obj.value = item
            this.yearList.push(obj)
        })
         this.$emit('getTurnoverYear',this.yearList)
        this.initChart()
      }
    },
    showMask(){
        if(this.isHall){
            return
        }else{
            this.show = true
        }
    },
    getDate(date) {
        this.selectYear = date
    },
    closeMask(){
        this.show = false
    },
    initChart() {
        var result = Math.max(...this.visitData);
        var maxData = [];
        this.visitData.map((i) => {
        maxData.push(result);
        })
        let myChart = echarts.init(this.$refs.myChart);
        var option = {
        tooltip: {
            show: false
        },
        legend: {
            data: ["游客量（万人次）", "营业额 (万元)"],
            bottom: "1%",
            itemWidth:10,
            itemHeight:10,
            itemGap:40,
            textStyle: {
                    color: "#ffffff"
            }
         },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '15%',
            top: '10%',
            containLabel: true
        },
        xAxis: [
            {
            type: 'category',
            gridIndex: 0,
            data: this.xaxis,
            // boundaryGap: false,
            axisTick: {
                show: false,
                alignWithLabel: false
            },
            axisLine: {
                lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
                }
            },
            axisLabel: {
                show: true,
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 12
            }
            }
        ],
        yAxis: [
            {
            type: 'value',
            splitNumber: 3,
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
                }
            },
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)'
            }
            },
            {
            type: 'value',
            splitNumber: 3,
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)'
                }
            },
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)'
            }
            }
        ],
        series: [
            {
            name: '营业额 (万元)',
            type: 'line',
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false, //平滑曲线显示
            showSymbol: false,
            symbol: "circle", //标记的图形为实心圆
            itemStyle: {
                //折线拐点标志的样式
                color: "rgba(255, 205, 38, 1)"
            },
            zlevel: 19,
            lineStyle: {
                width: 4,
                color: 'rgba(255, 205, 38, 1)'
            },
            data: this.turnoveList
            },
            {
            name: '游客量（万人次）',
            type: 'bar',
            barWidth: '15',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
                normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                    offset: 0,
                    color: '#04E9B0'
                    },
                    {
                    offset: 0.1,
                    color: '#04E9B0'
                    },
                    {
                    offset: 1,
                    color: '#0066FF'
                    }
                ])
                }
            },
            data: this.visitData,
            zlevel: 11
            },
            {
            name: '',
            type: 'bar',
            barWidth: '15',
            xAxisIndex: 0,
            yAxisIndex: 0,
            barGap: '-100%',
            data: maxData,
            itemStyle: {
                normal: {
                color: 'rgba(255,255,255,0.1)',
                barBorderRadius: 30
                }
            },
            zlevel: 9
            }
        ]
        };
        myChart.setOption(option)
        myChart.off('click'); //防止触发两次点击事件
        myChart.getZr().on('click', (params) => {
            let pointInPixel = [params.offsetX, params.offsetY];
            if (myChart.containPixel('grid', pointInPixel)) {
                let pointInGrid = myChart.convertFromPixel({
                    seriesIndex: 0
                }, pointInPixel);
                let xIndex = pointInGrid[0]; //索引
                let handleIndex = Number(xIndex);
                // let seriesObj = myChart.getOption(); //图表object对象
                var op = myChart.getOption();
                //获得图表中点击的列
                var year = op.xAxis[0].data[handleIndex];  //获取点击的列名
                this.defaultYear = year
            };
        })
    },
  },
}
</script>
<style lang="less" scoped>
.left-qyzcz {
  width: 360px;
  height: 220px;
  color: #fff;
  .tab-title {
      padding: 14px 10px 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    .dec {
        width: 196px;
        height: 14px;
        font-size: 14px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 14px;
    }
    .unit{
        padding-right: 15px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
    }
   
  } 
  .tab-title1{
    padding: 24px 10px 0 24px !important;
  }
  .tab-content {
    width: 360px;
    position: relative;
  .tab-myChart1{
      width: 100%;
      height: 260px;
  }
  .tab-myChart{
      width: 100%;
      height: 190px;
  }
  }
    .mask-detail{
        width: 360px;
        height: 374px;
        background: rgba(11, 17, 51, 0.85);
        position: relative;
        top: -105%;
        right: 105%;
        z-index: 1000;
         .close{
            cursor: pointer;
            width: 20px;
            height: 20px;
            background: url('../../assets/close.png') no-repeat;
            background-size: 100% 100%;
            position: absolute;
            right: 12px;
            top: 12px;
        }
        .top-content{
            display: flex;
            align-items: center;
            padding: 24px 10px 0 24px;
        }
        .scroll-content {
            height: 140px;
            overflow: hidden;
            padding:0 24px;
            font-size: 12px;
            color: #FFFFFF;
            /deep/ .dv-scroll-board .header{
            font-size: 12px;
            color: rgba(255, 255, 255, 0.4);
            }
            /deep/  .dv-scroll-board .rows{
                font-size: 12px;
                color: RGBA(229, 230, 234, 1);
                font-weight: 400;
            }
       }
    }
}
</style>